<template>
  <div class="role">
    <el-button type="primary" class="btn" @click="add" size="mini">添加角色</el-button>
    <!-- v-el-drag-dialog  可以进行拖拽 -->
    <el-dialog
      v-el-drag-dialog
      title="添加角色"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <el-form ref="role" :model="form" :rules="roleRules" size="mini">
        <el-form-item label="名称：" label-width="70px" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="备注：" label-width="70px" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 表格部分 -->
    <zj-table
      v-loading="loading"
      :columns="columns"
      :data="lists"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      :selectable="false"
      height="auto"
      :pagination="true"
    />
  </div>
</template>

<script>
export default {
  data(){
    return {
      dialogVisible: false,
      form: {},
      total: 1,
      currentPage: 1,
      pageSize: 10,
      roleRules: {
        roleName: [
          { required: true, message: '请输入角色名称' }
        ],
        remark: [
          { required: true, message: '请输入备注' }
        ]
      },
      loading: false,
      lists: [
        {
          remark: '统计产肉的斤数',
          roleName: '统计员',
          roleKey: 'common'
        },
        {
          remark: '市场部经理',
          roleName: '市场经理',
          roleKey: 'common'
        },
        {
          remark: '第一美男子',
          roleName: '乔晓琳',
          roleKey: 'common'
        }
      ],
      columns: Object.freeze([
        {
          label: '角色',
          prop: 'roleName',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          align: 'center'
        },
        {
          width: 300,
          label: '操作',
          actions: [
            {
              id: 'follow',
              text: '编辑',
              type: 'primary',
              disabled: ({ roleKey }) => roleKey === 'admin',
              click: this.dialog
            },
            {
              id: 'role',
              text: '分配权限',
              type: 'primary',
              disabled: ({ roleKey }) => roleKey === 'admin',
              click: this.handleRole
            },
            {
              id: 'delete',
              text: '删除',
              type: 'danger',
              disabled: ({ roleKey }) => roleKey === 'admin',
              click: this.delItem
            }
          ]
        }
      ])
    }
  },
  methods:{
    add(){
      this.dialogVisible = true
    },
    // 编辑
    dialog(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    // 分配权限
    handleRole(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    // 删除
    delItem(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.role{
  .btn{
    margin-bottom: 20px;
  }
}
</style>